<template>
  <div>
    <head-view/>
    <div class="tong">
      <div class="serach ww" :style="{backgroundImage: 'url('+require('@/assets/images/bgc1.png')+')'
      ,backgroundRepeat: 'no-repeat'
      ,backgroundSize: '100% 100%'
      }">
      </div>
    </div>
    <div class="elegant-aero">
      <el-form ref="form" :model="form" label-width="80px">
        <h1>登录
        </h1>
        <el-form-item label="账号" prop="username">
          <input v-model="form.username" type="text" maxlength="20"  placeholder="请输入账号"></input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <input v-model="form.password" type="password" maxlength="20" placeholder="请输入密码"></input>
        </el-form-item>
        <el-form-item label="确认密码" prop="password2">
          <input v-model="form.password2" type="password" maxlength="20" placeholder="请再次输入密码"></input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm">注册</el-button>
          <el-button @click="$router.push('/login')">返回登录</el-button>
        </el-form-item>
      </el-form>
    </div>
    <footer-view/>
  </div>
</template>

<script>
  import HeadView from '@/components/HeadView/index'
  import FooterView from '@/components/FooterView/index'
  import {register} from '@/api/user'
  import {MessageBox} from "element-ui";

  export default {
    name: "login-reg",
    data() {
      return {
        form: {
          username: '',
          password: '',
          password2: ''
        }
      }
    },
    components: {HeadView, FooterView},
    methods: {
      /** 提交按钮 */
      submitForm() {
        let _this = this;
        register(_this.form).then(response => {
          MessageBox.confirm('注册成功', '系统提示', {
              confirmButtonText: '确认',
              showCancelButton: false,
              type: 'success '
            }
          ).then(() => {
            _this.from = {
              username: '',
              password: '',
              password2: ''
            }
            _this.resetForm("form");
          })

        })
      },
    }
  }
</script>

